<template>
  <view class="box">
    <div class="head">
      <div class="avatat">
        <div>
          <img src="~@/static/personalCenter/tx.png" alt>
        </div>
        <span>Zz1236789</span>
        <p>186****1643</p>
      </div>
		<navigator url="../set/set" class="set" hover-class="none"><img src="~@/static/icon/set.png"></navigator>
      <div class="leve">
        <div>
          <img src="~@/static/personalCenter/hg.png" alt>当前等级
        </div>
        <div>一级经销商</div>
      </div>
			<!-- 我的订单 -->
			<div class="orderBox radius">
				<div class="title">
					<h2>我的订单</h2>
					<span>
						<navigator url="../order/order?active=0" hover-class="none">
							全部订单
							<van-icon name="arrow" />
						</navigator>
					</span>
				</div>
				<van-row class="orderList">
					<div>
						<navigator url="../order/order?active=1" hover-class="none">
							<img src="~@/static/personalCenter/dfk.png" />
							<span>待付款</span>
						</navigator>
					</div>
					<div>
						<navigator url="../order/order?active=2" hover-class="none">
							<img src="~@/static/personalCenter/dfh.png" />
							<span>待发货</span>
						</navigator>
					</div>
					<div>
						<navigator url="../order/order?active=3" hover-class="none">
							<img src="~@/static/personalCenter/dsh.png" />
							<span>待收货</span>
						</navigator>
					</div>
					<div>
						<navigator url="../order/order?active=4" hover-class="none">
							<img src="~@/static/personalCenter/ywc.png" />
							<span>已完成</span>
						</navigator>
					</div>
				</van-row>
			</div>

    </div>

			<!-- 我的资产 -->
			<div class="radius">
				<div class="title">
					<h2>我的资产</h2>
				</div>
				<van-row class="orderList assets">
					<div>
						<navigator url="../assets/profit" hover-class="none">
							<img src="~@/static/personalCenter/syqb.png" />
							<span>收益钱包</span>
						</navigator>
					</div>
					<div>
						<navigator url="../assets/licai" hover-class="none">
							<img src="~@/static/personalCenter/lcqb.png" />
							<span>理财钱包</span>
						</navigator>
					</div>
					<div>
						<navigator url="../assets/shoppingIntegral" hover-class="none">
							<img src="~@/static/personalCenter/gwjf.png" />
							<span>购物积分</span>
						</navigator>
					</div>
					<div>
						<navigator url="../assets/quotaIntegral" hover-class="none">
							<img src="~@/static/personalCenter/pejf.png" />
							<span>配额积分</span>
						</navigator>
					</div>
					<div>
						<navigator url="/" hover-class="none">
							<img src="~@/static/personalCenter/c2c(1).png" />
							<span>C2C钱包</span>
						</navigator>
					</div>
					<div>
						<navigator url="../assets/candy" hover-class="none">
							<img src="~@/static/personalCenter/tg.png" />
							<span>我的糖果</span>
						</navigator>
					</div>
				</van-row>
			</div>
			<!-- 用户设置 -->
			<div class="radius">
				<div class="title">
					<h2>用户设置</h2>
				</div>
				<van-row class="orderList user">
					<div>
						<navigator url="../user/set" hover-class="none">
							<img src="~@/static/personalCenter/sfz.png" />
							<span>个人资料</span>
						</navigator>
					</div>
					<div>
						<navigator url="../user/community" hover-class="none">
							<img src="~@/static/personalCenter/sq.png" />
							<span>我的社区</span>
						</navigator>
					</div>
					<div>
						<navigator url="../user/invitation" hover-class="none">
							<img src="~@/static/personalCenter/fx.png" />
							<span>分享好友</span>
						</navigator>
					</div>
					<div>
						<navigator url="../login/login" hover-class="none">
							<img src="~@/static/personalCenter/kf.png" />
							<span>联系客服</span>
						</navigator>
					</div>
				</van-row>
			</div>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.box{
	background: #f5f5f5;
	padding-bottom: 20upx;
}
.head {
	width: 100%;
	display: inline-block;
  background: url('~@/static/personalCenter/bg.png') no-repeat top;
  background-size: 100% auto;
  .set{
	  position: absolute;
	  width: 31upx;
	  height: 29upx;
	  top: 60upx;
	  right: 30upx;
	  img{width: 100%;height: 100%;}
  }
  .avatat{
	  float: left;
	  margin-top: 103upx;
	  margin-left: 30upx;
	  &>div{
		  width: 120upx;
		  height: 120upx;
		  border-radius: 50%;
		  overflow: hidden;
		  background: #fff;
		  float: left;
		  margin-right: 20upx;
		  img{width: 100%;height: 100%;}
	  }
		span{font-size: 32upx;color: #3C1E0D;margin-top: 22upx;font-weight: bold;display: inline-block}
		p{font-size:26upx;color: #3C1E0D}
  }
  .leve{
	  float: right;
	  width: 179upx;
		height: 138upx;
		text-align: center;
		margin-top: 93upx;
		background: url('~@/static/personalCenter/0.png') no-repeat top;
		background-size: 100% auto;
		div:nth-child(1){
			margin-top: 47upx;
			font-size: 18upx;
			color: #FFE142;
			img{
				width: 23upx;
				height: 20upx;
			}
		}
		div:nth-child(2){
			font-size: 20upx;
			color: #fff
		}
	}
}

	.radius{
		width: 690upx;
		margin:30upx 30upx 0;
		border-radius: 20upx;
		background: #fff;
		display: inline-block;
		.title{
			height: 87upx;
			line-height: 87upx;
			padding-left: 32upx;
			h2{
				display: inline;
				font-size: 32upx;
				color: #000;
			}
		}
	}
	
	.orderBox{
		margin-top: 56upx;
		.title{
			border-bottom: 1upx solid #F1F1F1;
			span{float: right;
				font-size: 26upx;
				color: #9F9F9F;
				margin-right: 24upx;
			}
		}
	
	}

		.orderList{
			// display: flex; flex-wrap: nowrap;flex-direction: row;
			div{
				display: inline-block;
				text-align: center;
				width: 25%;
				padding: 34upx 0;
				img{
					width: 48upx;
					height: 48upx;
				}
				span{
					display: block;
					color: #626262;
					font-size: 26upx;
				}
			}
			&.assets{
				div{
					img{
						width: 94upx;
						height: 94upx;
					}
				}
			}
			&.user{
				div{
					img{
						width: 47upx;
						height: 47upx;
					}
				}
			}
		}
	

</style>
